<template>
  <div class="addSensor height_100">
    <page-model
    :breadHeard=breadHeard
    @backLast="backLast"
    >
      <desc-title
        class="mt-25"
        :descTitle="descTitle"
      >
      </desc-title>
      <div class="addMainBox">
        <el-form
          :model="sceneDTO "
          :rules="rules"
          ref="statisticalItemsDTO"
          label-width="300px"
          class="demo-ruleForm"
        >
          <el-form-item v-if="sceneData.sceneNum" label="基坑编号："  class="need_name" >
            <el-input type="text" placeholder="请输入基坑名称"  v-model="sceneData.sceneNum" disabled></el-input>
          </el-form-item>
          <el-form-item label="基坑名称："  class="need_name" prop="sceneName">
            <el-input type="text" placeholder="请输入基坑名称"  v-model="sceneDTO.sceneName" ></el-input>
          </el-form-item>
          <el-form-item label="位置："  class="need_name" prop="sceneAd">
            <el-input type="text" placeholder="请输入位置" maxlength="10" v-model="sceneDTO.sceneAd" ></el-input>
          </el-form-item>
          <el-form-item label="等级："  class="need_name" prop="请选择等级">
            <el-select v-model="sceneDTO.sceneLevel" placeholder="请选择等级">
              <el-option
                v-for="item in levelList"
                :key="item.level"
                :value="item.level"
                >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btn">
            <div class="determainAdd flex-center" @click="determainAdd">确定</div>
        </div>
      </div>
    </page-model>
  </div>
</template>

<script>
// import { duration } from 'moment'
export default {
  data () {
    return {
      descTitle: '基本信息',
      breadHeard: {
        firstBread: '基坑',
        secondBread: '添加',
        title: '添加基坑'
      },
      sceneData: {
        sceneNum: ''
      },
      sceneDTO: {
        sceneName: '',
        sceneAd: '',
        sceneLevel: '一级'
      },
      rules: {
        sceneName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        sceneAd: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        sceneLevel: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      levelList: [{
        level: '一级'
      }, {
        level: '二级'
      }, {
        level: '三级'
      }]
    }
  },
  mounted () {
    if (this.sceneId) {
      const params = {
        projectId: this.projectId,
        sceneId: this.sceneId
      }
      this.$store.dispatch('sceneController/editSensorDesc', params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data
          this.sceneDTO = {
            sceneName: data.sceneName,
            sceneAd: data.sceneAd,
            sceneLevel: data.sceneLevel
          }
          this.breadHeard = {
            firstBread: '基坑',
            secondBread: '编辑',
            title: '编辑基坑'
          }
        }
      })
    }
  },
  computed: {
    projectId () {
      return localStorage.getItem('projectId')
    },
    sceneId () {
      return sessionStorage.getItem('sceneId')
    },
    sceneType () {
      return 1
    }
  },
  methods: {
    backLast () {
      this.$router.push('/baseHoleMain')
    },
    determainAdd () {
      this.$refs.statisticalItemsDTO.validate((valid) => {
        if (valid) {
          const sceneId = this.sceneId
          const params = {
            projectId: this.projectId, sceneType: this.sceneType, ...this.sceneDTO
          }
          if (this.sceneId) { // 编辑
            this.$store.dispatch('sceneController/UpdateScene', { params, sceneId }).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '编辑成功',
                  type: 'success',
                  duration: 500
                })
                this.$router.push('/baseHoleMain')
                this.$store.dispatch('sceneController/updateResData', { sceneTypeId: 1 })
                // this.sceneDTO = {
                //   sceneName: '',
                //   sceneAd: '',
                //   sceneLevel: '一级'
                // }
                // this.breadHeard = {
                //   firstBread: '基坑',
                //   secondBread: '添加',
                //   title: '添加基坑'
                // }
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error',
                  duration: 1000
                }
                )
              }
            })
            return
          }
          // console.log(params)
          // 添加
          this.$store.dispatch('sceneController/addScene', params).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success',
                duration: 500
              })
              this.$store.dispatch('sceneController/updateResData', { sceneTypeId: 1 })
              this.$router.push('/baseHoleMain')
            } else {
              this.$message({
                message: res.data.message,
                type: 'error',
                duration: 1000
              }
              )
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .addMainBox {
    position: relative;
    min-height: calc(100% - 206px);
    border-bottom: solid 1px #e6e6e6;
    padding: 42px 0 0 42px;
    background-color: #fff;
    .el-form-item{
      margin-bottom: 36px;
    }
    .el-form-item__content{
      line-height: 48px;
    }
    ::v-deep .el-form-item__label {
        width: 300px !important;
        text-align: right;
        font-size: 16px;
        color: #333333;
      }
    .need_name {
      ::v-deep .el-form-item__label:before {
        content: "*";
        color: #4868ff;
      }
      .el-input {
        position: absolute;
        left: 300px;
        ::v-deep .el-input__inner {
          width: 400px;
          height: 48px;
          border-radius: 6px;
          border: 1px solid rgba(220, 220, 220, 1);
          font-size: 16px;
        }
      }
      ::v-deep .el-form-item__error {
        position: absolute;
        left: 300px;
        top: 50px;
        width: 400px;
      }
    }
      .name {
      .el-input {
        position: absolute;
        left: 300px;
        ::v-deep .el-input__inner {
          width: 400px;
          height: 48px;
          border-radius: 6px;
          border: 1px solid rgba(220, 220, 220, 1);
          font-size: 16px;
        }
      }
      ::v-deep .el-form-item__error {
        position: absolute;
        left: 300px;
        top: 50px;
        width: 400px;
      }
    }
      .select {
        position: absolute;
        width: 168px;
        height: 22px;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        text-align: right;
        top: 53px;
        left: 42px;
      }
      .select::before {
        content: "*";
        color: #4868ff;
      }
      .el-select {
        width: 400px;
        height: 48px;
        ::v-deep .el-input--suffix .el-input__inner{
          height: 48px;
          line-height: 48px;
        }
      }
      .determainAdd{
        position: absolute;
        cursor: pointer;
        left:343px;
        bottom:30px;
        width:172px;
        height:48px;
        background:rgba(72,104,255,1);
        border-radius:24px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:48px;
      }
  }
</style>
